<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>发布需求</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/area.js"></script>
    <style>
        em{font-size: 12px;}
        .content{}
        .content ul{}
        .content ul li{position: relative;line-height: 30px;padding: 10px;overflow: hidden;}
        .content ul li .left{float: left;color: #FFC10C;width: 25%;box-sizing: border-box;border-right: 1px solid #ededed;}
        .content ul li .left span{display: block;width: 100%;text-align: justify;}
        .content ul li .right{float: right;color: #333;width: 75%;overflow: hidden;position: relative;}
        .content ul li .type select{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .type span{float: right;color: #666;}
        .content ul li .number{height: 30px;}
        .content ul li .number label{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;z-index: 3;}
        .content ul li .number label input{background-color: transparent;}
        .content ul li .number span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 2;text-align: right;}
        .content ul li .title{padding-left: 10px;}
        .content ul li .time{}
        .content ul li .time input{position: absolute;left: 10px;top: 0;width: 100%;height: 100%;border: none;outline: none;background-color: transparent;}
        .content ul li .time span{float: right;color: #666;}
        .content ul li .right .area{padding-left: 3%;}
        .content ul li .right .area select{width: 30%;font-size: 13px;line-height: 24px;border: none;background-color: #EFEFEF;}
        .content ul li .check{text-align: right;}
        .content ul li .check label{float: right;height: 30px;line-height: 30px;margin: 0 5px;}
        .content ul li .right .sex{padding-left: 3%;}
        .content ul li .right .sex span{display: inline-block;background-color: #EFEFEF;width: 30%;
            text-align: center;font-size: 14px;line-height: 24px;}

        .content .detail{padding:10px;position: relative;}
        .content .detail .title{display: block;color: #FFC10C;margin-bottom: 5px;width: 25%;text-align: justify;}
        .content .detail textarea{width: 100%;height: 100px;color: #333;margin-top: 5px;font-size: 14px;padding: 10px 0;}

        .content .photo{padding: 10px;overflow: hidden;}
        .content .photo p{float: left;position: relative;}
        .content .photo p input{position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow: hidden;opacity: 0;}
        .content .photo p i{color: #FFC10C;font-size: 22px;}
        .content .photo .img{float: left;width: 100px;height: 100px;;font-size:12px;color: #666;margin-left: 15px;background-size: cover;background-position: center;}

        .aui-con1:after{content: '线下交易';}
        .aui-con2:after{content: '平台托管';}
        .aui-con3:after{content: '公开';}
        .aui-con4:after{content: '需要';}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;z-index: 99999;left: 0;bottom: 0;width: 100%;height: 50px;line-height: 50px;color: #fff;}
        .footer-fixed .left{float: left;width: 65%;background-color: #ffc10c;font-size: 16px;text-indent: 20px;}
        .footer-fixed .right{float: right;width: 35%;background-color: #f69802;font-size: 18px;text-align: center;font-weight: bold;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">发布需求</div>
            <div class="right">
                <a href="">
                    <i class="iconfont icon-wenhao"></i>
                </a>
            </div>
        </div>
    </header>
    <div class="content">
        <ul>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">需求类型</span>
                </div>
                <div class="right type">
                    <select>
                        <option>模特</option>
                        <option>丽人</option>
                        <option>摄影</option>
                        <option>设计</option>
                        <option>生活服务</option>
                        <option>语言练习</option>
                        <option>专业咨询</option>
                        <option>影视表演</option>
                    </select>
                    <span>请选择<i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">标题</span>
                </div>
                <div class="right title">
                    <input type="text" placeholder="请输入"/>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">价格</span>
                </div>
                <div class="right number">
                    <label>
                        <input type="number" placeholder="请输入" maxlength="5"/>
                    </label>
                    <span>元/小时</span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">开始时间</span>
                </div>
                <div class="right time">
                    <input type="datetime-local"/>
                    <span><i class="iconfont icon-arrow_right"></i></span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">时长</span>
                </div>
                <div class="right number">
                    <label>
                        <input type="number" placeholder="请输入" maxlength="5"/>
                    </label>
                    <span>小时</span>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">需求人数</span>
                </div>
                <div class="right number">
                    <label>
                        <input type="number" placeholder="请输入" maxlength="5"/>
                    </label>
                    <span>人</span>
                </div>
            </li>
            <!--<li class="bottom-line">-->
                <!--<div class="left">-->
                    <!--<span class="name">投标人数</span>-->
                <!--</div>-->
                <!--<div class="right number">-->
                    <!--<label>-->
                        <!--<input type="number" placeholder="请输入" maxlength="5"/>-->
                    <!--</label>-->
                    <!--<span><em>(默认5人,增加一人扣5积分)</em>人</span>-->
                <!--</div>-->
            <!--</li>-->
            <li class="bottom-line">
                <div class="left">
                    <span class="name">地区</span>
                </div>
                <div class="right">
                    <label class="area">
                        <select id="s_province" class="prov">
                            <option value="0">选择省份</option>
                        </select>
                        <select id="s_city" class="city">
                            <option value="0">选择城市</option>
                        </select>
                        <select id="s_county" class="district">
                            <option value="0">选择地区</option>
                        </select>
                    </label>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">付款方式</span>
                </div>
                <div class="right check">
                    <label>
                        <input class="aui-switch aui-switch1 aui-con1" type="radio" name="a"/>
                    </label>
                    <label>
                        <input class="aui-switch aui-switch1 aui-con2" type="radio" name="a"/>
                    </label>
                </div>
            </li>
        </ul>
        <div class="detail bottom-line">
            <div class="title">内容详情</div>
            <label class="textarea">
                <textarea placeholder="请输入详情"></textarea>
            </label>
        </div>
        <div class="photo">
            <p>
                <i class="iconfont icon-camera"></i>
                <input id="file" type="file" accept="image/jpg,image/png,image/jpeg"/>
            </p>
            <div class="img"></div>
        </div>
        <ul>
            <li class="top-line bottom-line">
                <div class="left">
                    <span class="name">信息要求</span>
                </div>
                <div class="right check">
                    <label>
                        <input class="aui-switch aui-switch2 aui-con3" type="checkbox"/>
                    </label>
                </div>
            </li>
            <li class="bottom-line">
                <div class="left">
                    <span class="name">性别要求</span>
                </div>
                <div class="right">
                    <div class="sex">
                        <span class="man">男</span>
                        <span class="women">女</span>
                        <span class="any">不限</span>
                    </div>
                </div>
            </li>
            <li>
                <div class="left">
                    <span class="name">保证金</span>
                </div>
                <div class="right check">
                    <label>
                        <input class="aui-switch aui-switch2 aui-con4" type="checkbox"/>
                    </label>
                </div>
            </li>
        </ul>
    </div>
    <footer class="footer">
        <div class="footer-fixed">
            <div class="left">总金额：<span class="total">684元</span></div>
            <div class="right publish">确认发布</div>
        </div>
    </footer>
</body>
<script>
    _init_area();
    $('.sex span').click(function(){
        $(this).css('background-color','#FFC10C').siblings().css('background-color','');
    })
</script>
<script>
    function checkBrowser(){
        var browser=navigator.appName;
        var b_version=navigator.appVersion;
        var version=b_version.split(";");
        var trim_Version=version[1].replace(/[ ]/g,"");
        if(browser=="Microsoft Internet Explorer" &&
                trim_Version=="MSIE6.0" ||
                trim_Version=="MSIE7.0" ||
                trim_Version=="MSIE8.0" ||
                trim_Version=="MSIE9.0"){
            return true
        }
    }
    var file = document.getElementById('file');
    file.addEventListener('change',function(){
        var fileType = file.value;
        var obj = document.getElementsByClassName('img')[0];
        obj.innerHTML = '加载中...';
        if(fileType.length > 1 && fileType ) {
            var ldot = fileType.lastIndexOf(".");
            var type = fileType.substring(ldot + 1);
//过滤其它格式的文件
            if(type == "jpg" || type == "png" || type == "jpeg"){
                var isIe = checkBrowser();
                if(isIe){
                    var url = this.value;
                    obj.innerHTML = '';
                    url = url.replace(/\\/g,'/');
                    obj.style.backgroundImage = ('url("'+url+'")');

                }else{
                    var reader = new FileReader();
                    reader.readAsDataURL(this.files[0]);
                    reader.onload = function(e) {
                        obj.innerHTML = '';
                        var imgUrl = e.target.result;
                        obj.style.backgroundImage = ('url("'+imgUrl+'")');
                    };
                }
            }else{
//清空选择的非法文件
                obj.innerHTML = '';
                file.value = "";
                obj.style.backgroundImage = ('url("")');
                setTimeout(function(){
                    alert("请上传图片类型为 jpg、png、jpeg的图片！")
                },500);
            }
        }else{
            obj.innerHTML = '';
            var isSelect = document.getElementById("file").value;
            if(isSelect == "" || isSelect == null){
                obj.style.backgroundImage = ('url("")');
            }
        }
    });
</script>
</html>